import React, { useEffect, useState } from 'react'
import { TbSearch } from "react-icons/tb";
import styles from './FilterFood.module.css'
function FilterFood({ filterFood }) {
    //存在问题：用keyword双向绑定由于state更新是异步的，无法控制搜索的关键字是实时输入进去的
    const [keyword, setKeyword] = useState('')
    const changeHandler = (e) => {
        setKeyword(e.target.value.trim())

        // filterFood(e.target.value)
    }
    useEffect(() => {
        //降低数据过滤的次数，提高用户体验
        //用户输入完了再过滤，用户输入的过程中，不要过滤
        //解决方案：当用户停止输入动作1秒后，我们才做查询
        //在开启一个定时器的同时应该关掉上一次的定时器
        const timer = setTimeout(() => {
            filterFood(keyword)
        }, 1000)
        //清理函数，在下一次effect执行前执行一次，在这里可以清除上次effet执行所带来的影响
        return () => {
            clearTimeout(timer)
        }

    }, [keyword])
    return (
        <div className={styles.FilterFood}>
            <div className={styles.InputOuter}>
                <TbSearch className={styles.SearchIcon} />
                <input
                    value={keyword}
                    onChange={changeHandler}
                    type="text"
                    placeholder={'请输入关键字'}
                    className={styles.SearchInput} />

            </div>

        </div>
    )
}

export default FilterFood